import React,{useState,useEffect,useLayoutEffect} from 'react'

function UseLayoutEffect(props){
    console.log('start')
    const [qty,setQty] = useState(1)
    const [page,setPage] = useState(1)
    
    useEffect(()=>{
        console.log('useEffect',document.querySelector('h4'))
    },[])


    // useLayoutEffect在浏览器渲染前同步执行，等效于类组件中的componentWillMount()
    useLayoutEffect(()=>{
        console.log('useLayoutEffect',document.querySelector('h4'))
        // for(let i=0;i<10000;i++){
        //     console.log(666)
        // }
        // console.log('for end')
    })


    console.log('end')
    return (
        <div>
            <h4>useLayoutEffect66</h4>
            <button onClick={()=>{
                setQty(qty+1)
            }}>qty: {qty}</button>
            <button onClick={()=>{
                setPage(page+1)
            }}>page: {page}</button>
        </div>
    )
}

export default UseLayoutEffect;